import React, { useState } from 'react';
import { Button, Modal, Form, Input } from 'antd';
import { UserInfo } from '../../apis/user/type';
interface Iprops{
    close:(val:string)=>void
}

const App = (props:Iprops) => {
    const [isModalOpen, setIsModalOpen] = useState(true);
    const [form] = Form.useForm();
    const handleOk = () => {

        form.submit();
         
       // props.close("nihao");
    };

    const handleCancel = () => {
       
     

        props.close("nihao");
    };

    const onFinish=(values:UserInfo)=>{

        console.log("values",values);

       // props.close("nihao");
    

    }

    return (
        <>
        
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form className='login-form'
                name="basic"
                labelCol={{ span: 4 }}
                onFinish={onFinish}
                autoComplete="off"
                form={form}
            >
            <Form.Item<UserInfo>
                    label="姓名"
                    name="name"
                    rules={[{ required: true, message: '请输入姓名!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<UserInfo>
                    label="手机号"
                    name="mobile"
                    rules={[{ required: true, message: '请输入手机号!' }]}
                >
                    <Input autoComplete="off"  />
                </Form.Item>
            </Form>
            </Modal>
        </>
    );
};

export default App;